<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name ="viewport"  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=360">
    <title>可视化数据</title>
</head>
<body style="background-color: #009688">
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="开启全屏"
           onclick="sendNative(nomal_screen_open)"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="关闭全屏"
           onclick="sendNative(nomal_screen_close)"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="当前音量"
           onclick="sendNative(nomal_current_volume)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="最大音量"
           onclick="sendNative(nomal_max_volume)"/>
    <input type="button"
           style="color:white;
                  width:100px;
                  height:50px;
                  background-color:#6495ed"
           value="打开H5"
           onclick="sendNative(nomal_webview_open)"/>

    <input type="button"
           style="color:white;
                  width:100px;
                  height:50px;
                  background-color:#6495ed"
           value="关闭H5"
           onclick="sendNative(nomal_webview_close)"/>
</div>
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="开启麦克风"
           onclick="sendNative(audio_microphone_open)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="关闭麦克风"
           onclick="sendNative(audio_microphone_close)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="开启扬声器"
           onclick="sendNative(audio_speaker_open)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="关闭扬声器"
           onclick="sendNative(audio_speaker_close)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="语义识别"
           onclick="sendNative(audio_semantics)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="语音合成"
           onclick="sendNative(audio_speech)"/>
</div>
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="机器前进"
           onclick="sendNative(motion_ahead)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="机器后退"
           onclick="sendNative(motion_back)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="机器左转"
           onclick="sendNative(motion_turn_left)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="机器右转"
           onclick="sendNative(motion_turn_right)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="机器参数控制"
           onclick="sendNative(motion_send_message)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="机器停止"
           onclick="sendNative(motion_stop)"/>
</div>
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="打开上嘴唇灯光"
           onclick="sendNative(light_upper_open)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="关闭上嘴唇灯光"
           onclick="sendNative(light_upper_close)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="打开下嘴唇灯光"
           onclick="sendNative(light_lower_open)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="关闭下嘴唇灯光"
           onclick="sendNative(light_lower_close)"/>
</div>
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="头部水平转动"
           onclick="sendNative(head_horizontal_rotate)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="头部参数控制"
           onclick="sendNative(head_send_message)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="头部回正"
           onclick="sendNative(head_reset)"/>
</div>
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="身体左转"
           onclick="sendNative(body_turn_left)"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="身体右转"
           onclick="sendNative(body_turn_right)"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="身体转身"
           onclick="sendNative(body_turn_body)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="身体转圈"
           onclick="sendNative(body_turn_around)"/>
    <input type="button"
           style="color:white;
                  width:100px;
                  height:50px;
                  background-color:#6495ed"
           value="身体参数控制"
           onclick="sendNative(body_send_message)"/>
</div>
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="左臂转动"
           onclick="sendNative(arm_turn_left)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="右臂转动"
           onclick="sendNative(arm_turn_right)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="手臂复位"
           onclick="sendNative(arm_reset)"/>
</div>
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="开启人脸识别"
           onclick="sendNative(face_open)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="关闭人脸识别"
           onclick="sendNative(face_close)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="打印控制"
           onclick="sendNative(print)"/>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="关机"
           onclick="sendNative(shutdown)"/>
    <input type="button"
           style="color:white;
                  width:100px;
                  height:50px;
                  background-color:#6495ed"
           value="延迟关机"
           onclick="sendNative(shutdown_delay)"/>
</div>
<div>
    <input id="result"
           type="text"
           style="width:90%;height:50px;
           margin-top:30px;
           margin-right:50px"
           readonly="readonly"/>
</div>
<div>
    <p><font size="6" face="arial" color="white">语音指令</font></p>
    <p><font size="5" face="arial" color="white">-前进 -后退 -左转 -右转 -停止</font></p>
    <p><font size="5" face="arial" color="white">-打开上嘴唇灯光 -关闭上嘴唇灯光 -打开下嘴唇灯光 -关闭下嘴唇灯光</font></p>
    <p><font size="5" face="arial" color="white">-头部左转 -头部右转 -头部转动*度 -头部回正</font></p>
    <p><font size="5" face="arial" color="white">-左臂转动 -右臂转动 -手臂回正</font></p>
    <p><font size="5" face="arial" color="white">-身体左转 -身体右转 -转身 -转圈</font></p>
    <p><font size="5" face="arial" color="white">-握个手</font></p>
</div>

</div>
<script>

    /****************************************** 普通交互协议 ***************************************/

    var nomal_screen_open = '{ "type": "1","alias": "full_screen", "action": "true" }'; //开启全屏

    var nomal_screen_close = '{ "type": "1","alias": "full_screen", "action": "false" }'; //关闭全屏

    var nomal_current_volume = '{ "type": "1","alias": "current_volume", "action": "true" }'; //当前音量

    var nomal_max_volume = '{ "type": "1","alias": "max_volume", "action": "true" }'; //最大音量

    var nomal_webview_open = '{ "type": "1","alias": "webview", "action": "true" }'; //打开H5

    var nomal_webview_close = '{ "type": "1","alias": "webview", "action": "false" }'; //关闭H5

    var webview_back = '{ "type": "1","alias": "webview_back" }'; //H5返回


    /****************************************** 语音交互协议 ***************************************/

    var audio_microphone_open = '{ "type": "2","alias": "microphone", "action": "true" }'; //开启麦克风

    var audio_microphone_close = '{ "type": "2","alias": "microphone", "action": "false" }'; //关闭麦克风

    var audio_speaker_open = '{ "type": "2","alias": "speaker", "action": "true" }'; //开启扬声器

    var audio_speaker_close = '{ "type": "2","alias": "speaker", "action": "false" }'; //关闭扬声器

    var audio_semantics = '{ "type": "2","alias": "semantics", "action": "true", "message": "杭州明天天气怎么样" }'; //语义识别

    var audio_speech = '{ "type": "2","alias": "speech", "action": "true", "message": "现在进行语音合成测试内容" }'; //语音合成


    /****************************************** 运动交互协议 ***************************************/

        //运动控制
    var motion_ahead = '{ "type": "3","alias": "motion_ahead"}'; //前进

    var motion_back = '{ "type": "3","alias": "motion_back"}'; //后退

    var motion_turn_left = '{ "type": "3","alias": "motion_turn_left"}'; //左转

    var motion_turn_right = '{ "type": "3","alias": "motion_turn_right"}'; //右转

    var motion_send_message = '{ "type": "3","alias": "motion_send_message","aheadBackValue": "80","leftRightValue": "80"}'; //参数控制

    var motion_stop = '{ "type": "3","alias": "motion_stop"}'; //停止

    //灯光控制
    var light_upper_open = '{ "type": "3","alias": "light_upper","action": "true"}'; //打开上嘴唇灯光

    var light_upper_close = '{ "type": "3","alias": "light_upper","action": "false"}'; //关闭上嘴唇灯光

    var light_lower_open = '{ "type": "3","alias": "light_lower","action": "true"}'; //打开下嘴唇灯光

    var light_lower_close = '{ "type": "3","alias": "light_lower","action": "false"}'; //关闭下嘴唇灯光

    //头部控制
    var head_horizontal_rotate = '{ "type": "3","alias": "head_horizontal_rotate"}'; //水平转动

    var head_send_message = '{ "type": "3","alias": "head_send_message","angle": "120","speed": "8"}'; //参数控制

    var head_reset = '{ "type": "3","alias": "head_reset"}'; //头部回正

    //身体控制
    var body_turn_left = '{ "type": "3","alias": "body_turn_left"}'; //左转

    var body_turn_right = '{ "type": "3","alias": "body_turn_right"}'; //右转

    var body_turn_body = '{ "type": "3","alias": "body_turn_body"}'; //转身

    var body_turn_around = '{ "type": "3","alias": "body_turn_around"}'; //转圈

    var body_send_message = '{ "type": "3","alias": "body_send_message","angle": "120","speed": "8"}'; //参数控制

    //手臂控制
    var arm_turn_left = '{ "type": "3","alias": "arm_turn_left","angle": "120","speed": "8"}'; //左转

    var arm_turn_right = '{ "type": "3","alias": "arm_turn_right","angle": "120","speed": "8"}'; //右转

    var arm_reset = '{ "type": "3","alias": "arm_reset"}'; //复位

    //人脸识别
    var face_open = '{ "type": "3","alias": "face", "action": "true" }'; //开启人脸识别

    var face_close = '{ "type": "3","alias": "face", "action": "false" }'; //关闭人脸识别

    //打印控制
    var print = '{ "type": "3","alias": "print","message": "测试打印数据，但是数据不能太短，因为纸张会很短，不容易拿到"}'; //打印

    //关机
    var shutdown = '{ "type": "3","alias": "shutdown"}'; //关机（默认10秒关闭）（推荐使用此关机方式）

    var shutdown_delay = '{ "type": "3","alias": "shutdown_delay","delayTime": "15000"}'; //延迟关机（最少10秒）


    /********************************** 以下属于js主动向客户端发送消息 *******************************/


    function sendNative(data) {
        window.WebViewJavascriptBridge.send(
            data //传递给客户端的数据，客户端会解析data来做相应的处理
            , function (responseData) { //responseData为客户端返回的数据
                document.getElementById("result").value = responseData;
            }
        );

    }

    /********************************** 以下属于js接收android消息的统一回调 *******************************/

    /**
     * 注册事件监听，若不注册，则下面的方法接收不到客户端的请求
     */
    function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function () {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }

    /**
     * 注册js接口，用于监听来自客户端的响应
     */
    connectWebViewJavascriptBridge(
        function (bridge) {

            //语音识别回调
            bridge.registerHandler("audio", function (data, responseCallback) {
                document.getElementById("result").value = data;
            });

            //语义识别回调
            bridge.registerHandler("semantics", function (data, responseCallback) {
                document.getElementById("result").value = data;
            });

            //播放完成回调
            bridge.registerHandler("play", function (data, responseCallback) {
                document.getElementById("result").value = data;
            });


            bridge.registerHandler("semantics", function (data, responseCallback) {
                document.getElementById("result").value = data;
            });
            //运动交互失败回调
            bridge.registerHandler("motion", function (data, responseCallback) {
                document.getElementById("result").value = data;
            });

            //当前时间回调
            bridge.registerHandler("time", function (data, responseCallback) {
                document.getElementById("result").value = data;
            });

            //身份证信息回调
            bridge.registerHandler("idCard", function (data, responseCallback) {
                document.getElementById("result").value = data;
            });

            //医保卡信息回调
            bridge.registerHandler("idCard", function (data, responseCallback) {
                document.getElementById("result").value = data;
            });

            //二维码、条形码信息回调
            bridge.registerHandler("zxing", function (data, responseCallback) {
                document.getElementById("result").value = data;
            });
        }
    )

</script>

</body>
</html>
